<template>
	<view class="page">
		<!-- 首页轮播图 -->
		<swiper class="swiper" circular autoplay="{{true}}" >
			<swiper-item>
				<view class="swiper-item">
					<image style="width: 688rpx;height: 224rpx;"
						src="https://cdn8.axureshop.com/demo/2208121/images/%E4%BD%9C%E5%93%81%E9%A6%96%E9%A1%B5/u121.png"
						mode=""></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image style="width: 688rpx;height: 224rpx;"
						src="https://cdn8.axureshop.com/demo/2208121/images/%E4%BD%9C%E5%93%81%E9%A6%96%E9%A1%B5/u121.png"
						mode=""></image>
				</view>
			</swiper-item>
		</swiper>
		<!-- 挂号缴费便捷入口 -->
		<view class="conveniententrance">
			<view class="entrance register" @click="jump('/pages/Outpatient_registration/Outpatient_registration')">
				<image class="Img" style="width: 60rpx;" src="https://cdn8.axureshop.com/demo/2208121/images/%E4%BD%9C%E5%93%81%E9%A6%96%E9%A1%B5/u40.svg" mode="widthFix"></image>
				<view class="describe">
					<view class="title">
						门诊挂号
					</view>
					<view class="note">
						便捷预约挂号
					</view>
				</view>
			</view>
			<view class="entrance payfees" @click="jump('/pages/Outpatient_payment/Outpatient_payment')">
				<image class="Img" style="width: 70rpx;" src="https://cdn8.axureshop.com/demo/2208121/images/%E4%BD%9C%E5%93%81%E9%A6%96%E9%A1%B5/u45.svg" mode="widthFix"></image>
				<view class="describe">
					<view class="title">
						门诊缴费
					</view>
					<view class="note">
						便捷预约挂号
					</view>
				</view>
			</view>
		</view>
		<!-- 公告 -->
		<view class="notice">
			<view class="title">
				公告
			</view>
			<image class="splite" src="https://cdn8.axureshop.com/demo/2208121/images/%E4%BD%9C%E5%93%81%E9%A6%96%E9%A1%B5/u52.svg" mode="widthFix"></image>
			<swiper class="swiperNotice" circular vertical autoplay="{{true}}" interval="{{2000}}"
				duration="{{500}}">
				<swiper-item>
					<view class="swiper-item">智慧医院即将上线通知</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">智慧医院上线啦，手机也能问诊医...</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 门诊服务导航栏 -->
		<view class="navigation">
			<view class="title">
				<view class="name">
					门诊服务
				</view>
				<view class="more">
					更多
				</view>
			</view>
			<!-- 宫格导航 -->
			<view class="grids">
				<view class="grid" v-for="(item,index) in services" :key="index" @click="jump(item.path)">
					<view class="image">
						
					</view>
					<view class="text">
						{{item.text}}
					</view>
				</view>
			</view>
		</view>
		<!-- 健康资讯 -->
		<view class="information">
			<view class="title">
				<view class="name">
					健康资讯
				</view>
				<view class="more">
					更多
				</view>
			</view>
			<view class="infolists">
				<view class="info">
					<view class="lineOne">
						<view class="titleBig">
							世界糖尿病日，应该注意什么来调节？
						</view>
						<view class="cover">
							
						</view>
					</view>
					<view class="lineTwo">
						<view class="tag">
							#健康养生
						</view>
						<view class="operatearea">
							<view class="goods">
								<image style="width: 30rpx;" src="https://cdn8.axureshop.com/demo/2208121/images/%E4%BD%9C%E5%93%81%E9%A6%96%E9%A1%B5/u140.svg" mode="widthFix"></image>
								<view class="num">
									520
								</view>
							</view>
							<view class="read">
								<image style="width: 30rpx;" src="https://cdn8.axureshop.com/demo/2208121/images/%E4%BD%9C%E5%93%81%E9%A6%96%E9%A1%B5/u136.svg" mode="widthFix"></image>
								<view class="num">
									2000
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="info">
					<view class="lineOne">
						<view class="titleBig">
							世界糖尿病日，应该注意什么来调节？
						</view>
						<view class="cover">
							
						</view>
					</view>
					<view class="lineTwo">
						<view class="tag">
							#健康养生
						</view>
						<view class="operatearea">
							<view class="goods">
								<image style="width: 30rpx;" src="https://cdn8.axureshop.com/demo/2208121/images/%E4%BD%9C%E5%93%81%E9%A6%96%E9%A1%B5/u140.svg" mode="widthFix"></image>
								<view class="num">
									520
								</view>
							</view>
							<view class="read">
								<image style="width: 30rpx;" src="https://cdn8.axureshop.com/demo/2208121/images/%E4%BD%9C%E5%93%81%E9%A6%96%E9%A1%B5/u136.svg" mode="widthFix"></image>
								<view class="num">
									2000
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- tabbar -->
		<!-- <Tabbar></Tabbar> -->
		<!-- 智能客服 -->
		<view class="customer_service">
			智能客服
		</view>
	</view>
</template>

<script setup>
	import {
		reactive
	} from 'vue';
	import api from '../../src/utils/api.js'; // 导入封装好的请求函数
	import { onLoad } from '@dcloudio/uni-app'
	onLoad(()=>{
		// api('/patientlists',{
		// 	id:16,
		// 	name:'123'
		// }).then(res=>{
		// 	console.log(res)
		// }).catch(err=>{
		// 	console.log(err)
		// })
	})
	const services=reactive([
		{
			image:'',
			text:'门诊报告',
			path:'/pages/Outpatient_report/Outpatient_report'
		},
		{
			image:'',
			text:'候诊查询',
			path:'/pages/Waiting_inquiry/Waiting_inquiry'
		},
		{
			image:'',
			text:'自助开单',
			path:'/pages/Self-service/Self-service'
		},
		{
			image:'',
			text:'医技预约',
			path:'/pages/Medical_technology_appointment/Medical_technology_appointment'
		},
		{
			image:'',
			text:'我的复诊',
			path:'/pages/return_visit/return_visit'
		},
		{
			image:'',
			text:'自助取号',
			path:'/pages/Retrieval_notice/Retrieval_notice'
		},
		{
			image:'',
			text:'门诊导诊单',
			path:'/pages/Guidance_sheet/Guidance_sheet'
		},
		{
			image:'',
			text:'电子票据',
			path:'/pages/Electronic_bills/Electronic_bills'
		}
	])
	// 宫格导航跳转
	const jump = (url) => {
		uni.navigateTo({
			url:url
		})
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: rgba(22, 119, 255, 0.0588235294117647);
		min-height: 100vh;
		padding: 30rpx 30rpx 220rpx;
		box-sizing: border-box;

		.swiper {
			height: 224rpx;
			.swiper-item {
				display: block;
				text-align: center;
			}
		}

		// 挂号缴费便捷入口
		.conveniententrance{
			width: 100%;
			display: flex;
			justify-content: space-between;
			margin-top: 30rpx;
			.entrance{
				width: 330rpx;
				height: 164rpx;
				position: relative;
				cursor: pointer;
				background-repeat: no-repeat;
				.Img{
					position: absolute;
					left: 28rpx;
					top: 50%;
					transform: translateY(-50%);
				}
				.describe{
					position: absolute;
					left: 112rpx;
					top: 50%;
					transform: translateY(-50%);
					font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI', sans-serif;
					color: #fff;
					.title{
						font-size: 36rpx;
						font-weight: 700;
					}
					.note{
						font-size: 26rpx;
						margin-top: 18rpx;
					}
				}
			}
			.register{
				background-image: url('https://cdn8.axureshop.com/demo/2208121/images/%E4%BD%9C%E5%93%81%E9%A6%96%E9%A1%B5/u37.svg');
			}
			.payfees{
				background-image: url('https://cdn8.axureshop.com/demo/2208121/images/%E4%BD%9C%E5%93%81%E9%A6%96%E9%A1%B5/u42.svg');
			}
			
		}
		// 公告
		.notice{
			width: 100%;
			height: 84rpx;
			background-color: #fff;
			border-radius: 12rpx;
			margin-top: 30rpx;
			padding: 0 24rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			.title{
				font-family: 'Microsoft YaHei UI Bold Oblique', 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI', sans-serif;
				font-weight: 700;
				font-style: oblique;
				color: #000;
				font-size: 28rpx;
			}
			.splite{
				width: 4rpx;
				margin: 0 24rpx;
			}
			.swiperNotice{
				width: 500rpx;
				height: 40rpx;
				.swiper-item{
					display: block;
					font-family: 'Microsoft YaHei UI', sans-serif;
					color: #555555;
					font-size: 26rpx;
					line-height: 40rpx;
					width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
		}
		// 门诊服务导航栏
		.navigation{
			margin-top: 40rpx;
			.title{
				height: 40rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI', sans-serif;
				font-size: 28rpx;
				color: #7f7f7f;
				.name{
					font-weight: 700;
					font-size: 32rpx;
					color: #333333;
				}
			}
			.grids{
				width: 100%;
				height: 364rpx;
				background-color: #fff;
				margin-top: 40rpx;
				border-radius: 12rpx;
				padding: 30rpx;
				box-sizing: border-box;
				display: flex;
				flex-wrap: wrap;
				.grid{
					width: 25%;
					text-align: center;
					.image{
						width: 64rpx;
						height: 64rpx;
						border-radius: 12rpx;
						background-color: rgba(186, 224, 255, 1);
						display: inline-block;
					}
					.text{
						font-family: 'Microsoft YaHei UI', sans-serif;
						font-size: 28rpx;
						color: #333;
						line-height: 40rpx;
						margin-top: 14rpx;
					}
				}
			}
		}
		// 门诊资讯
		.information{
			margin-top: 60rpx;
			.title{
				height: 40rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI', sans-serif;
				font-size: 28rpx;
				color: #7f7f7f;
				.name{
					font-weight: 700;
					font-size: 32rpx;
					color: #333333;
				}
			}
			.infolists{
				margin-top: 40rpx;
				.info{
					width: 100%;
					height: 216rpx;
					background-color: #fff;
					border-radius: 16rpx;
					padding: 26rpx 38rpx;
					box-sizing: border-box;
					margin-bottom: 30rpx;
					.lineOne{
						display: flex;
						justify-content: space-between;
						.titleBig{
							width: 428rpx;
							line-height: 40rpx;
							font-family: 'Microsoft YaHei UI', sans-serif;
							color: #000;
							font-size: 32rpx;
						}
						.cover{
							width: 120rpx;
							height: 104rpx;
							background-color: rgba(230, 244, 255, 1);
							border-radius: 20rpx;
						}
					}
					.lineTwo{
						margin-top: 28rpx;
						height: 40rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						.tag{
							font-family: 'Microsoft YaHei UI', sans-serif;
							font-size: 24rpx;
							color: #1677FF;
						}
						.operatearea{
							width: 250rpx;
							justify-content: space-around;
							display: flex;
							.goods,.read{
								display: flex;
								align-items: center;
								height: 30rpx;
								font-family: 'Microsoft YaHei UI', sans-serif;
								font-size: 24rpx;
								color: #aaa;
								.num{
									margin-left: 14rpx;
								}
							}
						}
					}
				}
			}
		}
		// 智能客服
		.customer_service{
			width: 110rpx;
			height: 110rpx;
			background-image: url('https://cdn8.axureshop.com/demo/2208121/images/%E4%BD%9C%E5%93%81%E9%A6%96%E9%A1%B5/u190.svg');
			background-size: cover;
			text-align: center;
			line-height: 110rpx;
			font-family: 'ArialMT', 'Arial', sans-serif;
			font-size: 24rpx;
			color: #fff;
			position: fixed;
			right: 30rpx;
			bottom: 270rpx;
		}
	}
</style>